<template>
<div>
  <div>
     <a-card>
      <a-card-grid
        v-for="(item, index) in allThemeList"
        :key="index"
        :class="{'check_item': checkThemeIndex === index}"
        style="width: 25%; text-align: center; cursor: pointer;min-height: 119px;"
        @click="gridCheck(index, item)"
        >
        <img v-if="item.light.backImg" class="light_img" :src="item.light.backImg" alt="" srcset="">
        <img v-if="item.drak.backImg" class="drak_img" :src="item.drak.backImg" alt="" srcset="">
      </a-card-grid>
      <a-card-grid style="width: 25%; text-align: center; cursor: pointer;line-height: 97px;" @click="themeAddClick">
        <plus-outlined />
      </a-card-grid>
    </a-card>
  </div>
  <div v-show="checkThemeIndex > -1">
    <a-tabs v-model:activeKey="tabActive">
    <a-tab-pane key="1">
      <template #tab>
        <span>
          <apple-outlined />
          <img src="@/assets/sun.png" style="width:25px" alt="">
        </span>
      </template>
      <ConfigForm ref="lightTheme"></ConfigForm>
    </a-tab-pane>
    <a-tab-pane key="2" :forceRender="true">
      <template #tab>
        <span>
          <android-outlined />
          <img src="@/assets/moon.svg" style="width:25px" alt="">
        </span>
      </template>
      <ConfigForm ref="drakTheme"></ConfigForm>
    </a-tab-pane>
  </a-tabs>
    <a-button @click="submit">保存</a-button>
  </div>
</div>
</template>

<script setup lang="ts">
// import Dexie from 'dexie'
import ConfigForm from './ConfigForm.vue'
import { PlusOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { dexieTheme } from '@/hooks/dexie'
import { ITheme, Theme } from '@/typeing/dexie'
import { ref, onMounted, computed } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
const DThemeService = new dexieTheme()

const lightTheme = ref()
const drakTheme = ref()

const tabActive = ref('1')
const oldThemeList = computed(() => store.getters['app/diyThemes']) // 初次初始化读取到的已经添加过的主题列表
const addThemeList = ref([] as Array<ITheme>) // 本次新建的主题列表
const allThemeList = computed(() => [...oldThemeList.value,...addThemeList.value]) // 整合后的所有主题列表
const checkThemeIndex = ref(-1)

const changeId = ref(-1) // 当前修改的主题的id， 新建则为-1


// 保存
async function submit(){
  const light = lightTheme.value.getValue()
  const drak = drakTheme.value.getValue()
  if(changeId.value > -1){
    // 修改保存
    DThemeService.updateById(changeId.value, { light, drak }).then(() => {
      message.success('保存成功')
    }).catch(() => {
      message.error('保存失败')
    })
  }else{
    // 新建保存
    await DThemeService.save({ light, drak }).then(res => {
     // 刷新新建项，与页面配置关联上
     addThemeList.value.pop()
     checkThemeIndex.value = checkThemeIndex.value + 10
     const newObj = {
       light,
       drak,
       id: res
     }
     addThemeList.value.push(newObj)
     changeId.value = res
     gridCheck(addThemeList.value.length -1, newObj)
   })
  }
}


// 选中主题
function gridCheck(index: number, item: ITheme){
  if(checkThemeIndex.value == index) return
  changeId.value = item.id as number
  checkThemeIndex.value = index

  item.drak.background = `url(${item.drak.backImg})`
  item.light.background = `url(${item.light.backImg})`
  store.commit('app/setAppTheme', item)

  // 表单赋值
  lightTheme.value.setValue(item.light)
  drakTheme.value.setValue(item.drak)
}


// 新建主题点击事件
function themeAddClick(){
  const themeObj = new Theme()
  addThemeList.value.push(themeObj)
  themeObj.id = -1
  // 手动切换选中效果到新建
  gridCheck(addThemeList.value.length - 1, themeObj)
}

onMounted(() =>{
  // DThemeService.selectAll().then((res:any) => {
  //   if(!res.length) return
  //   themeList.value.push(...res)
  // })
})
</script>

<style lang="less" scoped>

.check_item{
  border: 1px solid #1890ff !important;
}
.ant-card-grid {
  border: 1px solid transparent;
  position: relative;
  padding: 10px;
  .light_img{
    width: 170px;
    margin: 0px auto;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
  }
  .drak_img{
    width: 170px;
    -webkit-clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
  }
  .drak_img{
    position: absolute;
    left: 15px;
  }
}


</style>